<template>
  <div class="container">
    <PageTitle title="AI 食谱生成器" />
    
    <div class="input-area">
      <input 
        v-model="msg" 
        placeholder="请输入现在已有的食材..."
        class="input-field"
      >
      <button 
        @click="sendMsg()" 
        class="action-btn"
        :disabled="isLoading"
      >
        <span v-if="!isLoading">发送</span>
        <span v-else class="loader"></span>
      </button>
      <button 
        @click="save" 
        class="action-btn secondary"
        :disabled="isLoading || !answer"
      >
        保存
      </button>
    </div>

    <div v-if="isLoading" class="loading-state">
      <img src="/public/lodin.gif" alt="加载中">
      <p>正在生成食谱...</p>
    </div>

    <div v-if="answer" class="answer-container">
      <div class="answer-content" v-html="answer"></div>
    </div>

    <div v-if="his_cook.length > 0" class="history-section">
      <h3>历史食谱</h3>
      <div 
        v-for="(item, index) in his_cook" 
        :key="index" 
        class="history-item"
      >
        <div class="history-question" v-html="item[0]"></div>
        <div class="history-answer" v-html="item[1]"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.title {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 600;
}

.input-area {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.input-field {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.input-field:focus {
  outline: none;
  border-color: #4CAF50;
}

.action-btn {
  padding: 0.75rem 1.5rem;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s;
}

.action-btn:hover {
  background-color: #3e8e41;
  transform: translateY(-2px);
}

.action-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  transform: none;
}

.secondary {
  background-color: #f0f0f0;
  color: #333;
}

.loading-state {
  text-align: center;
  margin: 2rem 0;
  color: #666;
}

.answer-container {
  margin: 2rem 0;
  padding: 1.5rem;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.history-section {
  margin-top: 3rem;
}

.history-section h3 {
  color: #2c3e50;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}

.history-item {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.history-item:hover {
  transform: translateY(-3px);
}

.history-question {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #2c3e50;
}

.loader {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>
<script setup>
import { ref,computed } from 'vue';
import axios from '../AI-axios/index';
import { useinfoStore } from '@/AI-Stores/info'
import PageTitle from '@/AI-components/PageTitle.vue';
const infoStore = useinfoStore()

let msg = ref('')
let answer = ref("")
let isLoading = ref(false)
let his_cook = computed(()=>{
    return infoStore.his_cook
})

const save = ()=>{
    infoStore.save([msg.value,answer.value],'cooker')
}

const sendMsg =() =>{
    isLoading.value = true
    axios.post('https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions', {
        "model": "qwen-plus",
        "messages": [
            {
                "role": "system",
                "content": "你是经验老道的厨师，你会根据我的食材为我提供一份完善的食谱"
            },
            {
                "role": "user",
                "content": msg.value
            }
        ]
    })
    .then(res => {
        console.log(res.data);
        answer.value = marked.parse(res.data.choices[0].message.content);
        infoStore.addQuery()
        infoStore.addCost(res.data.usage.total_tokens)
        console.log(token);
    })
    .finally(() => {
        isLoading.value = false
    })
}
</script>
<style scoped>
.loader {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

input, button {
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

input {
  width: 80%;
  margin-right: 10px;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #45a049;
}

.answer {
  margin-top: 20px;
  padding: 15px;
  border-radius: 8px;
  background-color: #f9f9f9;
  line-height: 1.6;
}

hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #eee;
}
</style>
